@use "@/common/css/_mixin.scss" as *;
@use "@/common/css/_option.scss" as *;

@mixin backgroundTransitions($color, $activeColor) {
	position: relative;
	background: $color;
	@at-root {
		&::before {
			content: '';
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: $activeColor;
			@content;
		}
	}
}

@mixin enterSweepToLeft($color, $activeColor) {
	@include backgroundTransitions($color, $activeColor){
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 100% 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}
}

@mixin enterSweepToRight($color, $activeColor) {
	@include backgroundTransitions($color, $activeColor){
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 0 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}
}

@mixin leaveSweep() {
	&::before {
		@include prefixed(transform, scaleX(1));
	}
}

